<template>
  <div class="long-image-container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">风险场景干预指南</div>
      <div class="nav-placeholder"></div>
    </div>

    <!-- 图片展示区域 -->
    <div class="image-wrapper" ref="imageWrapper">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading">
        <div class="spinner"></div>
        <p>图片加载中...</p>
      </div>

      <!-- 错误状态 -->
      <div v-if="error" class="error">
        <p>图片加载失败</p>
        <button @click="loadImage" class="retry-btn">重试</button>
      </div>

      <!-- 图片 -->
      <img
        v-show="!loading && !error"
        :src="imageUrl"
        alt="长图展示"
        @load="onImageLoad"
        @error="onImageError"
        class="long-image"
        ref="image"
      />
    </div>

    <!-- 底部提示 -->
    <div class="hint" v-if="showHint">
      <p>上下滑动查看完整图片</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "LongImageViewer",
  data() {
    return {
      imageUrl: "https://lesson.iapeap.com/%E5%9B%BE%E7%89%871.png",
      loading: true,
      error: false,
      showStatusBar: true,
      showHint: true,
      currentTime: this.getCurrentTime(),
    };
  },
  mounted() {
    // 初始加载图片
    this.loadImage();

    // 更新当前时间
    this.updateTime();

    // 3秒后隐藏提示
    setTimeout(() => {
      this.showHint = false;
    }, 3000);
  },
  methods: {
    // 加载图片
    loadImage() {
      this.loading = true;
      this.error = false;

      // 模拟图片加载（实际中不需要，这里只是为了演示加载状态）
      setTimeout(() => {
        // 实际图片会通过img标签的@load和@error事件处理状态
      }, 500);
    },

    // 图片加载完成
    onImageLoad() {
      this.loading = false;
      this.error = false;
    },

    // 图片加载失败
    onImageError() {
      this.loading = false;
      this.error = true;
    },

    // 获取当前时间
    getCurrentTime() {
      const now = new Date();
      return `${now.getHours().toString().padStart(2, "0")}:${now
        .getMinutes()
        .toString()
        .padStart(2, "0")}`;
    },

    // 更新时间
    updateTime() {
      setInterval(() => {
        this.currentTime = this.getCurrentTime();
      }, 60000); // 每分钟更新一次
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.long-image-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  overflow: hidden;
  position: relative;
}

/* 导航栏 */
.navbar {
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.nav-placeholder {
  width: 40px;
}

/* 图片容器 */
.image-wrapper {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
}

/* 长图样式 */
.long-image {
  width: 100%;
  max-width: 800px; /* 图片原始宽度 */
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 加载状态样式 */
.loading,
.error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #666;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.retry-btn {
  margin-top: 16px;
  padding: 8px 16px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.retry-btn:hover {
  background-color: #3a7bc8;
}

/* 底部提示 */
.hint {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 8px;
  font-size: 14px;
  animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 响应式调整 */
@media (max-width: 480px) {
  .image-wrapper {
    padding: 5px;
  }

  .status-bar {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>
